<template>
    <div>
        <div class="pay-item">
            <div class="pay-massage" @click="getWeixinQr()">
                <div class="payName">{{ pay.dictName }}</div>
                <div class="payAmount">{{ '￥' + pay.dictValue }}</div>
                <div class="payDescribe">{{ pay.remark }}</div>
            </div>
        </div>

        <el-dialog title="请确认套餐信息" :visible.sync="dialogVisible" width="30%">
            <div class="i-confirm">
                <div class="">套餐名称: {{ pay.dictName }}</div>
                <div class="">套餐价格: {{ pay.dictValue }}</div>
                <div class="">套餐简介：{{ pay.remark }}</div>
            </div>

            <div class="qrCode-massage">
                <div :id="'qrcodeImg' + pay.dictSort" class="qrCode"></div>
                请使用微信扫一扫<br />
                扫描二维码支付
            </div>
            <el-button class="queryPayStatus" @click="queryPayStatus()">我已支付</el-button>
        </el-dialog>
    </div>
</template>
  
<script>
import { alipay, createWeixinQr, getPayResult } from "@/api/other/vipPay";

import QRCode from 'qrcodejs2';

export default {
    name: "pay-item",
    props: {
        pay: {
            type: Object,
            default() {
                return {};
            },
        },
    },
    data() {
        return {
            dialogVisible: false,
            qrcodeImg: "",
            timer: "",
        };
    },

    methods: {
        // data:{
        // "codeUrl": "weixin://wxpay/bizpayurl?pr=N2l7Mxjzz",
        // "orderId": "1704695535855",
        // "resultCode": "SUCCESS",
        // "totalFee": "0.01"}
        getWeixinQr() {
            // 删除div内容，清除二维码
            var hasQr = document.getElementById('qrcodeImg' + this.pay.dictSort);
            if (hasQr) {
                hasQr.innerHTML = "";
            }
            this.pay.payId = new Date().getTime();
            let payEntity = {
                "payId": new Date().getTime(),
                "payName": this.pay.dictName,
                "payAmount": "0.01",
            }
            this.dialogVisible = true;
            createWeixinQr(payEntity).then(res => {
                let codeUrl = res.data.codeUrl;
                if (codeUrl.length !== 0) {
                    this.qrcode(codeUrl);
                    // 每隔6秒查询一次
                    // clearInterval(this.timer);
                    // this.timer = setInterval(() => {
                    //     this.queryPayStatus();
                    // }, 6000);
                } else {
                    this.$message.error("获取支付二维码出错! 请稍后再试!");
                }
            })
        },
        // 前端根据 URL 生成微信支付二维码
        qrcode(codeUrl) {
            console.log()
            return new QRCode('qrcodeImg' + this.pay.dictSort, {
                width: 100,
                height: 100,
                text: codeUrl,
                render: "canvas",
            });
        },
        queryPayStatus() {
            getPayResult(this.pay.payId).then(res => {
                let returnData = res.data.data;
                // 支付成功，进行跳转
                if (returnData == "支付成功") {
                    this.$message.success("支付成功！");
                    this.$router.push(`/o/vip/paySuccess`);
                } else if (returnData == "订单已超时") {
                    this.$message.warning("订单已超时，请重新付款!");
                } else {
                    this.$message.warning("订单还未支付!");
                }
            })
        },

        // 支付宝支付
        payConfirm(payObj) {
            console.log(payObj);
            let alipayBean = {
                "outTradeNo": new Date().getTime(),
                "subject": payObj.payDescribe,
                "totalAmount": "0.01",
                "body": "",
            };
            console.log(alipayBean);
            alipay(alipayBean).then((resp) => {
                // console.log(resp);
                // 添加之前先删除一下，如果单页面，页面不刷新，添加进去的内容会一直保留在页面中，二次调用form表单会出错
                // const divForm = document.getElementsById("qrCode");
                // if (divForm.length) {
                //     document.body.removeChild(divForm[0]);
                // }
                const div = document.createElement("div");
                // data就是接口返回的form 表单字符串
                // div.innerHTML = resp.data;
                // document.body.appendChild(div);
                // 新开窗口跳转
                // document.forms[0].setAttribute("target", "_blank");
                // document.forms[0].submit();
                // let newWindow = window.open("", "", "height=1000px,width=1000ox");
                // var newContent = "<html><head><title>A New Doc</title></head>";
                // newContent += "<body bgcolor='coral'><h1>This document is brand new.</h1>";
                // newContent += resp.data;
                // newContent += "</body></html>";
                // newWindow.document.write(newContent);
                // newWindow.document.close();
                // newWindow.focus();
            });
        },
    },
};
</script>
  
<style scoped>
.pay-item {
    box-sizing: border-box;
    width: 200px;
    height: 210px;
    margin-top: 20px;
    margin-left: 25px;
    border: 1px solid #e1e5eb;
    border-radius: 6px;
    cursor: pointer;
}

.pay-item:hover {
    background-color: rgb(223, 223, 223, 0.3);
}

.pay-massage {
    width: 100%;
    height: 100%;
}

.payName {
    font-size: 16px;
    color: #333333;
    font-weight: 500;
}

.payAmount {
    color: #C79745;
    font-size: 24px;
    font-weight: 600;
}

.payDescribe {
    text-decoration: line-through;
    color: #999999;
}

.i-confirm div {
    margin: 5px;
}

.qrCode-massage {
    text-align: center;
    margin-bottom: 10px;
}

.qrCode {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
}

.queryPayStatus {
    margin: 5px;
}
</style>